export default {
  computed: {
    // 光缆详情绝对定位
    hoverPosition() {
      return {
        left: this.hoverPositionLeft + 'px',
        top: this.hoverPositionTop + 'px'
      }
    },
    viewportSize() { // 浏览器视口高度
      return {
        innerWidth: document.body.clientWidth,
        innerHeight: document.body.clientHeight
      }
    },
    // 点击光缆和节点弹出框位置
    clickPosition() {
      return {
        left: this.clickPositionLeft + 'px',
        top: this.clickPositionTop + 'px'
      }
    },
    mapBox() {
      return document.querySelector('#mapContainer').getBoundingClientRect()
    }
  },
  data() {
    return {
      iconsVisible: false,
      clickProp: '',
      mouseEvent: '', // fiberHover/fiberClick/stationHover/stationClick
      associatedBusinessShow: false, // 关联业务弹窗
      associatedFaultBusinessShow: false, // 故障业务
      associatedRouteShow: false, // 关联路由弹窗
      deviceDetailShow: false, // 设备详情弹窗
      devicePortShow: false, // 设备端口详情
      cableDetailShow: false, // 光缆详情
      associatedFaultRouteShow: false, // 故障路由
      hoverPositionLeft: 0,
      hoverPositionTop: 0,
      clickPositionLeft: 0,
      clickPositionTop: 0,
      currentNode: {}, // 当前点击的节点
      currentEdge: {}, // 当前点击的边
      canvasHeight: 0
    }
  },
  beforeDestroy() {
    this.leaveCableTimer && clearTimeout(this.leaveCableTimer)
    this.leaveCableTimer = null
    this.addClearTimer(false)
  },
  methods: {
    operateFullScreen(fullScreen = true) {
      this.iconsVisible = false
      this.isEditTopo = false
      this.$emit('operateFullScreen', fullScreen)
      !fullScreen && this.$refs.addRight.showRightFn(false)
    },
    hoverEdge(obj) {
      this.clickProp = ''
      if (!this.btnIn && !this.stationIn) {
        this.mouseEvent = obj.mouseEvent
      }
      if (obj.mouseStatus === 'LEAVE') return
      this.cableList = obj.cableList || this.edges
      this.currentEdge = { ...this.currentEdge, ...obj } // 必须这样写，不然点击链损阈值差关联链路时，光缆名字传递不过去
      // this.hoverPositionLeft = obj.left
      // this.hoverPositionTop = obj.top
      this.calculateSpot(obj, 'hover', '.cableTabsDetail')
    },
    cableTabLeave() {
      this.leaveCableTimer && clearTimeout(this.leaveCableTimer)
      this.leaveCableTimer = null
      this.leaveCableTimer = setTimeout(() => {
        if (this.btnIn) return
        this.mouseEvent = ''
        this.clickProp = ''
        this.infoBoxIn = false
        this.stationIn = false
        // this.currentEdge = null
        this.hoverPositionLeft = 0
        this.hoverPositionTop = 0
      }, 500)
    },
    hoverNode(obj) {
      this.mouseEvent = obj.mouseEvent
      this.currentNode = obj
      this.clickProp = ''
      this.calculateSpot(obj, 'hover', '.hoverstationDetail')
    },
    selectEdge(obj) {
      this.clickProp = ''
      // console.log('连接线...', obj)
      if (obj.mouseStatus === 'SELECT') {
        this.clickProp = 'selectEdge'
        this.mouseEvent = obj.mouseEvent
      }
      // this.clickPositionLeft = obj.left
      // this.clickPositionTop = obj.top
      this.currentEdge = obj
      this.calculateSpot(obj, 'click', '.mouseEventClick')
      // 根据边id筛选出网段两端的起始设备或光缆两端的站点和机房
    },
    async selectNode(obj) {
      this.clickProp = ''
      this.currentNode = obj
      // console.log('this.currentNode', this.currentNode)
      if (obj.mouseStatus === 'SELECT') {
        this.clickProp = 'selectNode'
        this.mouseEvent = obj.mouseEvent
        if (obj.mouseEvent === 'mapRightClick' && this.zoom <= 10) {
          this.clickProp = ''
          this.mouseEvent = ''
        }
        if (obj.mouseEvent !== 'mapRightClick' && obj.mouseEvent !== 'facilityClick') {
          await this.getNodeList(this.currentNode.nodeId)
          await this.getBizList(this.currentNode.nodeId)
        }
        !this.indexShowRight && this.$store.commit('setGisActived', {
          cableIds: [],
          nodeIds: [obj.nodeId],
          color: 'highLight',
          noMove: true
        })
      }
      // console.log(obj.left, obj.top)
      this.calculateSpot(obj, 'click', '.mouseEventClick')
    },
    calculateSpot(obj, type, nodeClass) { // 计算弹窗位置
      this.$nextTick(() => {
        const box = document.querySelector(nodeClass)
        if (box) {
          const boxH = box.getBoundingClientRect().height
          const boxW = box.getBoundingClientRect().width
          box.classList.remove('vergeBottom', 'vergeLeft')
          if ((this.viewportSize.innerHeight - obj.top - this.mapBox.top) < boxH) {
            obj.top = obj.top - boxH + 10
            if (nodeClass === '.cableTabsDetail') {
              obj.top = obj.top + 10
              box.classList.add('vergeBottom')
            }
          }
          if ((this.viewportSize.innerWidth - obj.left - this.mapBox.left) < boxW) {
            obj.left = obj.left - boxW - 10
            if (nodeClass === '.cableTabsDetail') {
              obj.left = obj.left + 10
              box.classList.add('vergeLeft')
            }
          }
          if (type === 'click') {
            this.clickPositionLeft = obj.left
            this.clickPositionTop = obj.top
          }
          if (type === 'hover') {
            this.hoverPositionLeft = obj.left
            this.hoverPositionTop = obj.top
          }
          if (nodeClass === '.mouseEventClick') {
            this.addClearTimer(true, box)
          }
        }
      })
    },
    addClearTimer(timing = true, box) {
      this.opacityTimer && clearTimeout(this.opacityTimer)
      this.opacityTimer = null
      if (!timing) return
      this.opacityTimer = setTimeout(() => {
        box.classList.add('opacity1')
      }, 200)
    },
    // 关联业务click
    associatedBusinessClick(type) {
      this.operateFullScreen()
      // this.associatedBusinessShow = true
      this.$refs.addRight.showRightFn(true, {
        startStationIdList: [],
        endStationIdList: [],
        stationIdList: [this.currentNode.nodeId],
        keyword: '',
        bizStatus: '',
        clickProp: 'selectNode',
        stationType: 'no',
        trigger: true // 点击站点触发的
      }, 'open')
    },
    // 故障业务click
    faultBusinessClick(type) {
      this.operateFullScreen()
      // this.associatedFaultBusinessShow = true
      this.$refs.addRight.showRightFn(true, {
        startStationIdList: [],
        endStationIdList: [],
        stationIdList: [this.currentNode.nodeId],
        keyword: '',
        bizStatus: 'FAULT',
        clickProp: 'selectNode',
        stationType: 'no',
        trigger: true // 点击站点触发的
      }, 'open')
      // this.$router.push({
      //   path: '/business/faultBusiness',
      //   query: {
      //     regionId: this.currentNode.nodeId || ''
      //   }
      // })
    },
    // 关联路由click
    associatedRouteClick(type) {
      this.operateFullScreen()
      if (type === 'EDAGE') {
        // 根据光缆id查故障业务
      } else if (type === 'NODE') {
        // 根据节点id查故障业务
      }
      this.$refs.addRight.showRightFn(true, {
        startList: [],
        endList: [],
        stationIdList: [this.currentNode.nodeId],
        keyword: '',
        clickProp: 'selectEdge'
      }, 'open')
      // this.associatedRouteShow = !this.associatedRouteShow
    },
    // 设备详情click
    deviceClick() {
      this.operateFullScreen()
      this.deviceDetailShow = !this.deviceDetailShow
    },
    // 光缆详情click
    cableDetailClick() {
      this.operateFullScreen()
      this.cableDetailShow = !this.cableDetailShow
    },
    // 链损阈值click
    lossClick() {
      this.operateFullScreen()
      console.log(this.currentEdge)
      this.$refs.addRight.showRightFn(true, {
        startStationIdList: [],
        endStationIdList: [],
        stationIdList: [],
        keyword: this.currentEdge.label,
        clickProp: 'selectEdge',
        cableId: this.currentEdge.id,
        trigger: true // 点击光缆触发的
      }, 'open')
    },
    clickCableTab(item) {
      this.currentEdge = { ...this.currentEdge, ...item }
      this.clickProp = 'selectEdge'
      this.mouseEvent = item.clickBtn === 'left' ? 'fiberClick' : 'cableRightClick'
      item.top = item.top - 148
      this.calculateSpot(item, 'click', '.mouseEventClick')
    },
    cableSegmentClick(operateType) {
      this.$refs.mapContainer.showCableSegmentDetail(this.currentEdge, operateType)
      this.clickProp = ''
      this.eventName = ''
      this.infoBoxIn = false
      this.stationIn = false
      this.btnIn = false
    },
    hoverCluster(obj) {
      this.clusterInfo.hoverProp = false
      if (obj.mouseStatus === 'HOVER') {
        this.clusterInfo.hoverProp = true
        this.clusterInfo.clusterCount = obj.clusterCount
      }
      this.hoverPositionLeft = obj.left
      this.hoverPositionTop = obj.top
    },
    hoverFacility(obj) {
      /**
       * 地理节点的mouseover和光缆的mouseover都会改变mouseEvent，导致鼠标进入地理节点，相当于光缆离开地理节点，此时mouseEvent就又被置空
       * 地理节点详情不展示，为了解决这个问题，还需要给地理节点加上mousemove，再次设置mouseEvent的值
       */
      if (this.mouseEvent === 'facilityHover' && obj.mouseStatus === 'HOVER') return // 防止mousemove频繁被触发
      if (obj.mouseStatus === 'HOVER') {
        this.mouseEvent = obj.mouseEvent
      } else if (obj.mouseStatus === 'LEAVE') {
        this.clickProp = ''
        this.mouseEvent = ''
      }
      this.currentNode = obj.currentNode
      this.hoverPositionLeft = obj.left
      this.hoverPositionTop = obj.top
    }
  },
  mounted() {}
}
